import React from 'react';
import { Loader2 } from 'lucide-react';

const Loading = ({ size = 'default', text = '加载中...' }) => {
  const sizeClasses = {
    small: 'h-4 w-4',
    default: 'h-8 w-8',
    large: 'h-12 w-12'
  };

  return (
    <div className="flex flex-col items-center justify-center p-8">
      <Loader2 className={`${sizeClasses[size]} animate-spin text-primary-600 mb-2`} />
      <p className="text-sm text-gray-500">{text}</p>
    </div>
  );
};

// 骨架屏组件
export const HotspotSkeleton = () => {
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 animate-pulse">
      <div className="flex justify-between items-start mb-3">
        <div className="h-4 w-8 bg-gray-200 rounded"></div>
        <div className="h-6 w-16 bg-gray-200 rounded-full"></div>
      </div>
      <div className="space-y-2 mb-4">
        <div className="h-5 bg-gray-200 rounded w-4/5"></div>
        <div className="h-5 bg-gray-200 rounded w-3/5"></div>
      </div>
      <div className="space-y-2 mb-4">
        <div className="h-3 bg-gray-200 rounded w-full"></div>
        <div className="h-3 bg-gray-200 rounded w-2/3"></div>
      </div>
      <div className="flex space-x-2 mb-3">
        <div className="h-6 w-12 bg-gray-200 rounded"></div>
        <div className="h-6 w-16 bg-gray-200 rounded"></div>
      </div>
      <div className="flex justify-between items-center">
        <div className="flex space-x-4">
          <div className="h-4 w-12 bg-gray-200 rounded"></div>
          <div className="h-4 w-16 bg-gray-200 rounded"></div>
        </div>
        <div className="h-4 w-8 bg-gray-200 rounded"></div>
      </div>
    </div>
  );
};

// 网格骨架屏
export const HotspotGridSkeleton = ({ count = 6 }) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {Array.from({ length: count }).map((_, index) => (
        <HotspotSkeleton key={index} />
      ))}
    </div>
  );
};

export default Loading;